<template>
    <div class='subscription'  v-show='status'>
        <div class='container'>
             <i @click='closeStatus' class='iconfont icon-shanchu'></i>
            <h3>填写信息，视纪影视专业顾问会联系您</h3>
            <el-form ref="form">
                <el-form-item>
                    <el-input
                        maxlength="6"
                        v-model="params.name"
                        placeholder="请输入您的姓名"
                        prefix-icon="iconfont icon-yonghu"
                        >
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-input
                        v-model="params.mobile"
                        class='inputSearch'
                        placeholder="请输入您的回访手机号"
                        prefix-icon="iconfont icon-guanyuwomen-shoujiduan"
                        >
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-input
                        type="textarea"
                        :rows="7"
                        resize='none' 
                        maxlength="300"
                        v-model="params.content"
                        prefix-icon="iconfont icon-bianji"
                        placeholder="请输入您的留言内容">
                    </el-input>
                    <p>视纪影视郑重承诺，我们将严格保护您提交的资料信息</p>
                </el-form-item>
            </el-form>   
            <p class='moreLine'>
                <a @click='submit' class='more' href="javascript:;">提交信息</a>
            </p>
        </div>
    </div>

</template>


<script>
import { ajax } from "@/api";
export default {
    name:'subscription',
    data(){
        return {
            status:false,
            params:{
                type:'官网留言',
                content:'',
                pictures:'[]',
                name:'',
                mobile:'',
                token:''
            }
        }
    },
    methods:{
        openStatus(){
            this.status = true;
            console.log(this.status);
        },
        closeStatus(){
            this.status = false;
        },
        //提交反馈
        submit(){
            if(!this.params.content){
                this.$message.warning('提交内容不能为空');
                return false;
            }
            if(this.params.content.length < 4){
                this.$message.warning('提交内容不能少于4个字');
                return false;
            }
            if(!this.params.name){
                this.$message.warning('你的姓名不能为空');
                return false;
            }

            if(!this.isMobileNumber(this.params.mobile)){
                return false;
            }
            ajax('feedback',this.params).then((json) => {
                console.log(json);
                if(json.data.code === 200){
                    this.$message.success('提交成功');
                    this.params.name = '';
                    this.params.content = '';
                    this.params.mobile = '';
                }else{
                    this.$message.error(json.message);
                }
            });

        },
        isMobileNumber(phone) {
            var flag = false;

            var myreg = /^(((13[0-9]{1})|(14[0-9]{1})|(17[0-9]{1})|(15[0-3]{1})|(15[4-9]{1})|(18[0-9]{1})|(199))+\d{8})$/;
            if (phone == '') {
                // console.log("手机号码不能为空");
                this.$message.warning("手机号码不能为空！");
            } else if (phone.length != 11) {
                //console.log("请输入11位手机号码！");
                this.$message.warning("请输入11位手机号码！");
            } else if (!myreg.test(phone)) {
                //console.log("请输入有效的手机号码！");
                this.$message.warning("请输入有效的手机号码！");
            } else {
                flag = true;
            }
            
            return flag;
        }

    }
}
</script>


<style lang="less" scoped>
.subscription{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    background: rgba(0,0,0,.4);
    .container{
        width: 32%;
        min-width: 32%;
        padding: 1rem 2rem;
        background: #fff;
        border-top: 8px solid #ff1268;
        margin: 0 auto;
        position: relative;
        .icon-shanchu{
            position: absolute;
            right: 0;
            top: -7rem;
            color: #fff;
            font-size: 1.8rem;
            cursor: pointer;
        }
        h3{
            font-weight: 400;
            font-size: 20px;
            color: #000;
            margin: 2rem 0;
        }
        .moreLine{
            text-align: center;
            .more{
                display: inline-block;
                padding: 0.9rem 2.5rem;
                background: #ff1268;
                color: #fff;
                text-align: center;
            }
        }
    }
}
</style>
